<template>
  <div class="article-detail">
    <div class="lg-container">
      <div class="lg-row">
        <div class="article-detail-sidebar lg-col-md-15">
          <hot-article id="infoCard" style="margin-bottom: 20px"></hot-article>
          <article-nav id="titleList" :content="article.content" />
        </div>
        <div class="article-detail-container lg-col-md-45">
          <card padding="0" style="margin-bottom: 20px">
            <bill-board
              :poster="article.coverUrl"
              :title="article.title"
              :title-sub="
                article.createTime | dateFormatFilter('YYYY 年 MM 月 DD 日')
              "
            >
              <div class="tags">
                <el-tag
                  v-for="(tag, index) in article.tagsName"
                  :key="index"
                  effect="plain"
                  >{{ tag }}</el-tag
                >
                <!-- <btn
                  v-if="isLiked"
                  :loading="isLikeLoading"
                  shape="rect"
                  theme="gradient"
                  icon="like"
                  @click="collectArticle(0)"
                ></btn>
                <btn
                  v-if="!isLiked"
                  :loading="isLikeLoading"
                  shape="rect"
                  theme="gradient"
                  icon="unLike"
                  @click="collectArticle(1)"
                ></btn> -->
              </div>
            </bill-board>
          </card>
          <card padding="20px" style="margin-bottom: 20px">
            <md-preview :content="article.content" :is-bg-show="false" />
          </card>
          <card class="message-form" style="margin-bottom: 20px">
            <title-bar :bottom="20" title="交流专区 文明发言"></title-bar>
            <comment-box
              type="message"
              :article-id="article.id"
              @on-success="handleCommentsSuccess"
            />
          </card>

          <div>
            <card
              v-if="commentsList.length"
              padding="20px"
              style="margin-bottom: 20px"
            >
              <comment-item
                :comments-list="commentsList"
                type="message"
                :load="requestCommentsList"
                :loading="loading"
                :disabled="disabled"
                @on-fresh="requestCommentsList"
              />
            </card>
            <CardEmpty
              v-else
              text="暂无评论"
              style="height: 300px; margin-bottom: 20px"
            />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { ref, reactive, computed, onMounted, onUnmounted, getCurrentInstance } from 'vue'
import throttle from 'lodash/throttle'
import HotArticle from '@/components/page/HotArticle/index.vue'
import ArticleNav from '@/components/page/ArticleNav/index.vue'
import MdPreview from '@/components/base/MdPreview'
import Card from '@/components/base/Card'
import BillBoard from '@/components/kit/BillBoard'
import CommentItem from '@/components/kit/CommentItem/index.vue'
import CommentBox from '@/components/kit/CommentBox'
import TitleBar from '@/components/kit/TitleBar'
import CardEmpty from '@/components/kit/CardEmpty'

export default {
  name: 'ArticleDetail',
  components: {
    HotArticle,
    ArticleNav,
    Card,
    MdPreview,
    BillBoard,
    CommentItem,
    CommentBox,
    TitleBar,
    CardEmpty,
  },
  setup() {
    const proxy = getCurrentInstance().proxy
    const articleId = proxy.$route.params.articleId
    const article = ref({})
    const scrollHandler = () => {
      const t = document.documentElement.scrollTop || document.body.scrollTop
      const otherDom = document.getElementById('titleList')
      const infoCard = document.getElementById('infoCard')

      if (t >= infoCard.clientHeight + 20) {
        otherDom.classList.add('fixed-side-card')
      } else {
        otherDom.classList.remove('fixed-side-card')
      }
    }
    const throttleScroll = throttle(scrollHandler, 200)
    onMounted(async () => {
      await requestCommentsList()
      window.addEventListener('scroll', throttleScroll)
    })
    onUnmounted(() => {
      window.removeEventListener('scroll', throttleScroll)
    })

    const state = reactive({
      pageNum: 1,
      pageSize: 10,
      count: 0,
    })
    const commentsList = ref([])
    const loading = ref(true)
    const noMore = computed(() => commentsList.value.length >= state.count && !loading.value)
    const disabled = computed(() => loading.value || noMore.value)


    const handleCommentsSuccess = () => {
      proxy.$toast.success('评论成功...')
      state.pageNum = 1
      requestCommentsList()
    }
    const requestCommentsList = async () => {
      if (!articleId) {
        return
      }
      loading.value = true
      try {
        const res = await proxy.$API.comment.page({
          articleId,
          pageNum: state.pageNum,
          pageSize: state.pageSize,
        })
        if (res.data) {
          commentsList.value = res.data.list
          state.count = res.data.count
        }
      } catch (error) {

      } finally {
        loading.value = false
      }
    }
    return {
      article,
      commentsList,
      loading,
      disabled,
      noMore,
      handleCommentsSuccess,
      requestCommentsList,
    }
  },
  async asyncData({ app, params }) {
    try {
      const { articleId } = params
      const res = await app.$API.article.detail(articleId)
      return { article: res.data }
    } catch (error) {
      return { article: {} }
    }
  },
}
</script>

<style lang="less">
.article-detail {
  height: 100%;
  &-sidebar {
    display: none;
    @media screen and (min-width: @breakpoints-md) {
      display: block;
    }
  }
  &-container {
    .tags {
      .el-tag {
        background-color: transparent;
        border-color: @colorPrimary;
        color: @colorPrimary;
      }
    }
  }

  .fixed-side-card {
    position: fixed;
    top: @heightHeader + 20;
    width: 100%;
    @media screen and (min-width: @breakpoints-xs) {
      // min-width: 320px;
    }

    @media screen and (min-width: @breakpoints-sm) {
      max-width: @containerMaxWidth-sm * 7 / 24 - 16;
    }

    @media screen and (min-width: @breakpoints-md) {
      max-width: @containerMaxWidth-md * 7 / 24 - 16;
    }

    @media screen and (min-width: @breakpoints-lg) {
      max-width: @containerMaxWidth-lg * 7 / 24 - 16;
    }

    @media screen and (min-width: @breakpoints-xl) {
      max-width: @containerMaxWidth-xl * 6 / 24 - 16;
    }
  }
}
</style>
